<!-- 标签信息 -->
<template>
  <div>
    <div class="title pl0">
      <h3>标签信息</h3>
      <el-button
        type="text"
        v-if="isDisable && isLocked == '待锁定'"
        @click="handleEdit"
        >编辑</el-button
      >
    </div>
    <div v-for="(item, index) in formData.productTagViewList" class="label_box">
      <div class="head">
        <h3>{{ item.productTagName }}</h3>
        <div>
          <el-button
            type="text"
            @click="handleCopyForm(item, index)"
            v-if="!isDisable && index == formData.productTagViewList.length - 1"
            >复制</el-button
          >
          <el-button
            type="text"
            @click="handleDeleteForm(item, index)"
            v-if="
              !isDisable &&
              index != 0 &&
              index == formData.productTagViewList.length - 1
            "
            >删除</el-button
          >
        </div>
      </div>
      <div class="p6">
        <el-form
          ref="formModel"
          :model="item"
          :rules="rules"
          label-width="130px"
        >
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="标签名称:">
                <div :class="isDisable ? 'border_line' : ''">
                  <el-input
                    v-model="item.productTagName"
                    v-if="!isDisable"
                    placeholder="请输入内容"
                    size="small"
                  >
                  </el-input>
                  <span v-else>{{ item.productTagName }}</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标签类型:">
                <div :class="isDisable ? 'border_line' : ''">
                  <el-select
                    v-model="item.tagType"
                    v-if="!isDisable"
                    size="small"
                    filterable
                    placeholder="请选择"
                    @change="handleTagTypeChange(index,$event)"
                  >
                    <el-option
                      :label="x.label"
                      :value="x.value"
                      v-for="(x, i) in tagTypeList"
                      :key="i"
                    >
                    </el-option>
                  </el-select>
                  <span v-else>{{
                    querySelectName(tagTypeList, item.tagType, "label", "value")
                  }}</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标签数量:">
                <div :class="isDisable ? 'border_line' : ''">
                  <el-input
                    v-model.number="item.matchQuantity"
                    v-if="!isDisable"
                    placeholder="请输入内容"
                    size="small"
                  >
                  </el-input>
                  <span v-else>{{ item.matchQuantity }}</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="标签形状:">
                <div :class="isDisable ? 'border_line' : ''">
                  <el-select
                    v-model="item.tagShape"
                    v-if="!isDisable"
                    size="small"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      :label="x.label"
                      :value="x.value"
                      v-for="(x, i) in tagShapeList"
                      :key="i"
                    >
                    </el-option>
                  </el-select>
                  <span v-else>{{
                    querySelectName(
                      tagShapeList,
                      item.tagShape,
                      "label",
                      "value"
                    )
                  }}</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标签长度:">
                <div :class="isDisable ? 'border_line' : ''">
                  <el-input
                    v-if="!isDisable"
                    v-model="item.tagWidth"
                    type="number"
                    placeholder="请输入内容"
                    size="small"
                  >
                    <div
                      slot="suffix"
                      style="padding-right: 5px; padding-top: 3px"
                    >
                      mm
                    </div>
                  </el-input>
                  <span v-else
                    >{{ item.tagWidth }}<span class="pl16">mm</span></span
                  >
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标签宽度:">
                <div :class="isDisable ? 'border_line' : ''">
                  <el-input
                    v-model="item.tagHeight"
                    v-if="!isDisable"
                    type="number"
                    placeholder="请输入内容"
                    size="small"
                  >
                    <div
                      slot="suffix"
                      style="padding-right: 5px; padding-top: 3px"
                    >
                      mm
                    </div>
                  </el-input>
                  <span v-else
                    >{{ item.tagHeight }}<span class="pl16">mm</span></span
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="R角:">
                <div :class="isDisable ? 'border_line' : ''">
                  <el-input
                    v-model="item.tagBorderRadius"
                    v-if="!isDisable"
                    type="number"
                    placeholder="请输入内容"
                    size="small"
                  >
                    <div
                      slot="suffix"
                      style="padding-right: 5px; padding-top: 3px"
                    >
                      mm
                    </div>
                  </el-input>
                  <span v-else
                    >{{ item.tagBorderRadius
                    }}<span class="pl16">mm</span></span
                  >
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="边空:">
                <div :class="isDisable ? 'border_line' : ''">
                  <el-input
                    v-model="item.tagBorder"
                    v-if="!isDisable"
                    type="number"
                    placeholder="请输入内容"
                    size="small"
                  >
                    <div
                      slot="suffix"
                      style="padding-right: 5px; padding-top: 3px"
                    >
                      mm
                    </div>
                  </el-input>
                  <span v-else
                    >{{ item.tagBorder }}<span class="pl16">mm</span></span
                  >
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="被贴物:">
                <div :class="isDisable ? 'border_line' : ''">
                  <el-input
                    v-model="item.postedContent"
                    v-if="!isDisable"
                    placeholder="请输入内容"
                    size="small"
                  >
                  </el-input>
                  <span v-else>{{ item.postedContent }}</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8" v-if="item.tagType != ''">
              <el-form-item label="刮开涂层颜色:">
                <div :class="isDisable ? 'border_line' : ''">
                  <customInput
                    v-model="item.scrapingCoatingColor"
                    v-if="!isDisable && item.tagType != ''"
                    :disabled="item.tagType == 2 || item.tagType == 4"
                    :sourceData="item.coatingColorList"
                    @handleSaveSelect="handleSaveColorSelect"
                  />
                  <span v-else-if="sourceData.length">{{
                    querySelectName(
                      sourceData,
                      item.scrapingCoatingColor,
                      "label",
                      "value"
                    )
                  }}</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="item.tagType != ''">
              <el-form-item label="刮开文字颜色:">
                <div :class="isDisable ? 'border_line' : ''">
                  <customInput
                    v-model="item.scrapingWordColor"
                    v-if="!isDisable && item.tagType != ''"
                    :disabled="item.tagType == 2 || item.tagType == 4"
                    :sourceData="item.coatingColorTextList"
                    @handleSaveSelect="handleSaveColorSelect"
                  />
                  <span v-else-if="sourceData.length">{{
                    querySelectName(
                      sourceData,
                      item.scrapingWordColor,
                      "label",
                      "value"
                    )
                  }}</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="表面要求:">
                <div :class="isDisable ? 'border_line' : ''">
                  <el-select
                    v-model="item.surfaceRequires"
                    v-if="!isDisable"
                    size="small"
                    multiple
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="i in item.requireDataLists"
                      :key="i.dicValueCode"
                      :label="i.displayValue"
                      :value="i.dicValueCode"
                    />
                  </el-select>
                  <span v-else-if="requireDataLists.length">{{
                    formatData(item.surfaceRequires)
                  }}</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-table
            :data="item.productTagPrintingLayerList"
            :row-key="(row) => row.rowKey"
            border
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column
              prop="printingLayerName"
              width="150"
              align="center"
              label="图层名称"
            >
              <template slot-scope="scope">
                <el-input
                  v-if="!isDisable"
                  v-model="scope.row.printingLayerName"
                  placeholder="请输入内容"
                  @blur="addDetailList(scope.row, scope.$index, index)"
                  size="small"
                />
                <span v-else>{{ scope.row.printingLayerName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="baseFilmColor"
              width="150"
              align="center"
              label="底膜颜色"
            >
              <template slot-scope="scope">
                <customInput
                  v-if="!isDisable"
                  v-model="scope.row.baseFilmColor"
                  :sourceData="scope.row.sourceData"
                  @handleSaveSelect="handleSaveColorSelect"
                  @clear="handleClear(scope.row, $event)"
                  @childValueChange="
                    addDetailList(scope.row, scope.$index, index)
                  "
                />
                <span v-else-if="sourceData.length">{{
                  querySelectName(
                    sourceData,
                    scope.row.baseFilmColor,
                    "label",
                    "value"
                  )
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="school"
              width="150"
              align="center"
              label="材料"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.printingMaterial"
                  v-if="!isDisable"
                  placeholder="请选择材料"
                  clearable
                  size="mini"
                  filterable
                  @change="addDetailList(scope.row, scope.$index, index)"
                >
                  <el-option
                    v-for="i in scope.row.cailiaoData"
                    :key="i.dicValueCode"
                    :label="i.displayValue"
                    :value="i.dicValueCode"
                  />
                </el-select>
                <span v-else-if="printMaterials">{{
                  querySelectName(
                    printMaterials,
                    scope.row.printingMaterial,
                    "displayValue",
                    "dicValueCode"
                  )
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="technoPlaces"
              align="center"
              label="数码位数"
            >
              <template slot-scope="scope">
                <el-input
                  v-if="!isDisable"
                  type="number"
                  v-model="scope.row.technoPlaces"
                  @input="handleTechnoPlaces(scope.row,$event)"
                  @blur="addDetailList(scope.row, scope.$index, index)"
                  placeholder="请输入内容"
                  size="small"
                />
                <span v-else>{{ scope.row.technoPlaces }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="technoColor" align="center" label="数码颜色">
              <template slot-scope="scope">
                <span v-if="isDisable">{{
                  colorName(scope.row.technoColor)
                }}</span>
                <el-select
                        filterable
                  v-else
                  v-model="scope.row.technoColor"
                  :disabled="scope.row.technoPlaces == 0"
                  placeholder="请选择"
                  @change="addDetailList(scope.row, scope.$index, index)"
                  size="mini"
                >
                  <el-option label="黑码" :value="0"> </el-option>
                  <el-option label="彩码" :value="1"> </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="barCodePlaces"
              align="center"
              label="条码位数"
            >
              <template slot-scope="scope">
                <el-input
                  v-if="!isDisable"
                  type="number"
                  v-model="scope.row.barCodePlaces"
                  @blur="addDetailList(scope.row, scope.$index, index)"
                  placeholder="请输入内容"
                  size="small"
                />
                <span v-else>{{ scope.row.barCodePlaces }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="liuJiaoTexture"
              align="center"
              label="留胶材料"
            >
              <template slot-scope="scope">
                <customInput
                  v-if="!isDisable"
                  v-model="scope.row.liuJiaoTexture"
                  :sourceData="scope.row.liujiaoData"
                  @handleSaveSelect="handleSaveLiuJiaoSelect"
                  @childValueChange="
                    addDetailList(scope.row, scope.$index, index)
                  "
                />
                <span v-else-if="liuJiaoDataLists">{{
                  querySelectName(
                    liuJiaoDataLists,
                    scope.row.liuJiaoTexture,
                    "label",
                    "value"
                  )
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100px"
              fixed="right"
              align="center"
              v-if="!isDisable"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="
                    item.productTagPrintingLayerList.length - 1 != scope.$index
                  "
                  type="text"
                  @click="handleCopyRow(scope.row, scope.$index, index)"
                  >复制</el-button
                >
                <el-button
                  v-if="
                    item.productTagPrintingLayerList.length - 1 != scope.$index
                  "
                  type="text"
                  @click="handleDeleteRow(scope.row, scope.$index, index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </div>
    <el-empty
      v-if="formData.productTagViewList.length < 1 && isDisable"
      description="暂无标签信息"
    ></el-empty>
    <el-button
      plain
      style="width: 100%; margin-top: 5px"
      icon="el-icon-plus"
      size="small"
      v-if="!isDisable"
      @click="handleAddLabel"
    >
      新建标签</el-button
    >
    <div class="footer mt16" v-if="!isDisable">
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button size="small" class="ml16" type="primary" @click="handleSave"
        >保存</el-button
      >
    </div>
  </div>
</template>

      <script>
import customInput from "@/components/customInput";
import { querySelectName } from "@/utils";
export default {
  props: {
    productCode: {
      type: String,
      default: () => {
        return "";
      },
    },
    isLocked: {
      type: String,
      default: () => {
        return "";
      },
    },
    isShowEdits:{
      type: Boolean,
      default: () => {
        return false;
      },
    },
    formModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    formModel: {
      handler(newVal, oldVal) {
        this.formData.productTagViewList = newVal.productTagList;
        this.formData.productTagViewList.forEach((item) => {
          if (item.surfaceRequires === "") {
            item.surfaceRequires = [];
          } else {
            item.surfaceRequires = item.surfaceRequires.split(",");
          }
          item.productTagPrintingLayerList.forEach((x, i) => {
            if (x.technoColor === -1) {
              x.technoColor = "";
            }
            x.rowKey = i;
          });
          if (item.tagType === 0) {
            item.tagType = "";
          }
        });
      },
    },

    liuJiaoDataLists: {
      deep: true,
      handler(newVal, oldVal) {
        this.liuJiaoDataLists = newVal;
      },
    },
  },
  components: {
    customInput,
  },
  data() {
    return {
      querySelectName,
      rules: {}, //表单验证
      formData: {
        productCode: this.productCode,
        productTagViewList: [],
      },
      requireDataLists: [], // 表面要求列表
      requireDataListsCopy: [], // 表面要求列表
      sourceData: [], // 刮开文字颜色列表
      sourceDataCopy: [],
      printMaterials: [], // 印刷材料列表
      liuJiaoDataLists: [], //留胶材质列表
      tagTypeList: [
        {
          label: "刮开",
          value: 1,
        },
        {
          label: "揭开",
          value: 2,
        },
        {
          label: "刮开+揭开",
          value: 3,
        },
        {
          label: "印刷",
          value: 4,
        },
      ],
      tagShapeList: [
        {
          label: "长方形",
          value: "1",
        },
        {
          label: "正方形",
          value: "2",
        },
        {
          label: "圆形",
          value: "3",
        },
        {
          label: "椭圆形",
          value: "4",
        },
        {
          label: "异形",
          value: "5",
        },
      ],
      isDisable: true,
    };
  },
  created() {
    this.getRequireDataList();
    this.getSelectList("color");
    this.getSelectList("LiuJiaoTexture");
    // 获取印刷材料
    this.getPrintingMaterials();
  },
  methods: {
    // 获取表面要求列表
    getRequireDataList() {
      const params = {
        pageIndex: 1,
        pageSize: 9999,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 1,
        dictionaryCode: "SurfaceRequire",
        dicValueState: -1,
        isDelete: -1,
      };
      this.$api.business
        .QueryPageDictionaryValueDataList(params)
        .then((res) => {
          // res.list.forEach((item) => {
          //   item.label = item.displayValue;
          //   item.value = item.dicValueCode;
          // });
          this.requireDataLists = res.list;

          // this.formData.productTagViewList.forEach((item) => {
          //   this.requireDataLists.filter((x) => {
          //     // item.surfaceRequires.forEach((j) => {
          //     //   return (
          //     //     (x.dicValueState == 1 && x.isDelete == 0) ||
          //     //     x.dicValueCode == j
          //     //   );
          //     // });
          //   });
          // });
        });
    },

    handleTechnoPlaces(row){
      if(!row.technoPlaces){
        row.technoColor = ''
      }
    },

    //标签类型选择事件
    handleTagTypeChange(index,value){
      if(value == 2 || value == 4){
        this.$set(this.formData.productTagViewList[index],'scrapingCoatingColor','')
        this.$set(this.formData.productTagViewList[index],'scrapingWordColor','')
      }
      this.$forceUpdate()
    },

    // 获取印刷材料
    getPrintingMaterials() {
      const params = {
        pageIndex: 1,
        pageSize: 9999,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 1,
        dictionaryCode: "PrintingMaterial",
        dicValueState: 1,
        isDelete: -1,
      };
      this.$api.business
        .QueryPageDictionaryValueDataList(params)
        .then((res) => {
          this.printMaterials = res.list;
          this.formData.productTagViewList.forEach((item) => {
            item.productTagPrintingLayerList.forEach((j) => {
              this.$set(j, "label", j.displayValue);
              this.$set(j, "value", j.dicValueCode);
              j.cailiaoData = res.list.filter((x) => {
                if (
                  (x.dicValueState == 1 && x.isDelete == 0) ||
                  x.dicValueCode == j.printingMaterial
                ) {
                  return x;
                }
              });
            });
          });
        });
    },

    colorFun(state) {
      let list = JSON.parse(JSON.stringify(this.sourceData));
      let cailiaoList = JSON.parse(JSON.stringify(this.printMaterials));
      let liujiaoList = JSON.parse(JSON.stringify(this.liuJiaoDataLists));
      let biaomianList = JSON.parse(JSON.stringify(this.requireDataLists));
      this.formData.productTagViewList.forEach((item) => {
        if (state == "biaomian") {
          item.requireDataLists = biaomianList.filter((x) => {
            let val = false;
            if (item.surfaceRequires && item.surfaceRequires.length > 0) {
              item.surfaceRequires.forEach((k) => {
                if (
                  (x.dicValueState == 1 && x.isDelete == 0) ||
                  x.dicValueCode == k
                ) {
                  val = true;
                }
              });
            } else {
              if (x.dicValueState == 1 && x.isDelete == 0) {
                return x;
              }
            }
            if (val) {
              return x;
            }
          });
        }

        if (state == "coatingColor") {
          item.coatingColorList = list.filter((x) => {
            if (
              (x.dicValueState == 1 && x.isDelete == 0) ||
              x.dicValueCode == item.scrapingCoatingColor
            ) {
              return x;
            }
          });
        }

        if (state == "coatingTextColor") {
          item.coatingColorTextList = list.filter((x) => {
            if (
              (x.dicValueState == 1 && x.isDelete == 0) ||
              x.dicValueCode == item.scrapingWordColor
            ) {
              return x;
            }
          });
        }

        item.productTagPrintingLayerList.forEach((j) => {
          if (state == "color") {
            j.sourceData = list.filter((x) => {
              if (
                (x.dicValueState == 1 && x.isDelete == 0) ||
                x.dicValueCode == j.baseFilmColor
              ) {
                return x;
              }
            });
          } else if (state == "liujiao") {
            j.liujiaoData = liujiaoList.filter((x) => {
              if (
                (x.dicValueState == 1 && x.isDelete == 0) ||
                x.dicValueCode == j.liuJiaoTexture
              ) {
                return x;
              }
            });
          } else if (state == "cailiao") {
            j.cailiaoData = cailiaoList.filter((x) => {
              if (
                (x.dicValueState == 1 && x.isDelete == 0) ||
                x.dicValueCode == j.printingMaterial
              ) {
                return x;
              }
            });
          }
        });
      });
    },

    // 底膜颜色、刮开涂层颜色、刮开文字颜色等列表
    getSelectList(e) {
      const params = {
        pageIndex: 1,
        pageSize: 9999,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 1,
        dictionaryCode: e == "color" ? "TagColor" : "LiuJiaoTexture",
        dicValueState: -1,
        isDelete: -1,
      };
      this.$api.business
        .QueryPageDictionaryValueDataList(params)
        .then((res) => {
          res.list.forEach((item) => {
            // item.label = item.displayValue;
            // item.value = item.dicValueCode;
            this.$set(item, "label", item.displayValue);
            this.$set(item, "value", item.dicValueCode);
          });
          if (e == "color") {
            this.sourceData = res.list;
            this.formData.productTagViewList.forEach((item) => {
              item.coatingColorList = res.list;
              item.coatingColorTextList = res.list
              item.productTagPrintingLayerList.forEach((j) => {
                let arr = res.list.filter((x) => {
                  if (
                    (x.dicValueState == 1 && x.isDelete == 0) ||
                    x.dicValueCode == j.baseFilmColor
                  ) {
                    return x;
                  }
                });
                this.$set(j, "sourceData", arr);
              });
            });
          } else {
            this.liuJiaoDataLists = res.list;
            this.formData.productTagViewList.forEach((item) => {
              item.productTagPrintingLayerList.forEach((j) => {
                let arr = res.list.filter((x) => {
                  if (
                    (x.dicValueState == 1 && x.isDelete == 0) ||
                    x.dicValueCode == j.liuJiaoTexture
                  ) {
                    return x;
                  }
                });
                this.$set(j, "liujiaoData", arr);
              });
            });
          }
          this.$forceUpdate();
        });
    },

    unitChange() {
      if (this.formData.productTagViewList.length > 1) {
        this.formModel.baseData.productUnit = "套";
      } else {
        this.formModel.baseData.productUnit = "枚";
      }
    },

    //保存新增颜色下拉数据
    handleSaveColorSelect(e) {
      const params = {
        dictionaryCode: "TagColor",
        dicValue: e,
        displayValue: e,
        dicValueDesc: "",
        dicValueSort: 0,
      };
      this.$api.business.AddDictionaryValue(params).then((res) => {
        this.$message.success("保存成功");
        this.getSelectList("color");
      });
    },

    //清空底膜颜色事件
    handleClear(row, event) {
      // row.baseFilmColor = ''
      // row.baseFilmColorName = ''
    },

    //处理表面要求回显
    formatData(val) {
      let str = [];
      if (val && val.length > 0) {
        val.forEach((k, i) => {
          this.requireDataLists.forEach((item) => {
            if (item.dicValueCode == k) {
              str.push(item.displayValue);
            }
          });
        });
      }
      return str.join(",");
    },

    //添加留胶材质
    handleSaveLiuJiaoSelect(e) {
      const params = {
        dictionaryCode: "LiuJiaoTexture",
        dicValue: e,
        displayValue: e,
        dicValueDesc: "",
        dicValueSort: 0,
      };
      this.$api.business.AddDictionaryValue(params).then((res) => {
        this.getSelectList("LiuJiaoTexture");
      });
    },

    colorName(val) {
      let str = "";
      if (val === 0) {
        str = "黑码";
      } else if (val === 1) {
        str = "彩码";
      }
      return str;
    },

    //编辑
    handleEdit() {
      if(this.isShowEdits){
        this.isDisable = false
        this.isShowEdits = false
        this.$emit('showEditEvent',this.isShowEdits)
        if (this.formData.productTagViewList.length < 1) {
        this.formData.productTagViewList.push({
          productTagID: 0,
          productTagCode: "",
          tagClientCode: "",
          productCode: "",
          productTagName: "小标",
          matchQuantity: 1,
          comparisonObject: "",
          percentageValue: 0,
          productTagPrice: 0,
          tagShape: "",
          tagWidth: 0,
          tagHeight: 0,
          tagBorderRadius: 0,
          tagBorder: 0,
          tagType: "",
          postedContent: "",
          surfaceRequires: "",
          scrapingCoatingColor: "",
          scrapingWordColor: "",
          productTagPrintingLayerList: [
            {
              productPrintingLayerID: 0,
              productPrintingLayerCode: "",
              productLayerClientCode: "",
              productTagCode: "",
              isSurfaceLayer: 0,
              printingLayerName: "",
              printingMaterial: "",
              baseFilmColor: "",
              isHaveTechno: 0,
              technoPlaces: "",
              technoColor: "",
              rowKey: 0,
              isHaveBarCode: 0,
              barCodePlaces: "",
              isLiuJiao: 0,
              liuJiaoTexture: "",
            },
          ],
        });
      } else {
        this.formData.productTagViewList.forEach((item, index) => {
          item.productTagPrintingLayerList.push({
            productPrintingLayerID: 0,
            productPrintingLayerCode: "",
            productLayerClientCode: "",
            productTagCode: "",
            isSurfaceLayer: 0,
            printingLayerName: "",
            printingMaterial: "",
            baseFilmColor: "",
            isHaveTechno: 0,
            technoPlaces: "",
            rowKey: item.productTagPrintingLayerList.length,
            technoColor: "",
            isHaveBarCode: 0,
            barCodePlaces: "",
            isLiuJiao: 0,
            liuJiaoTexture: "",
          });
        });
      }

      this.colorFun("color");
      this.colorFun("cailiao");
      this.colorFun("liujiao");
      this.colorFun("biaomian");
      this.colorFun("coatingColor");
      this.colorFun("coatingTextColor");
      }else{
        this.$message.warning('有未保存的编辑，请保存后再编辑')
      }
    },

    //保存
    handleSave() {
      this.formData.productTagViewList.forEach((item, index) => {
        if (item.surfaceRequires.length > 0) {
          item.surfaceRequires = item.surfaceRequires.join(",");
        } else {
          item.surfaceRequires = "";
        }
        // item.productTagPrintingLayerList.forEach((i) => {
        //   if (i.technoColor == "黑码") {
        //     i.technoColor = 0;
        //   } else if (i.technoColor == "彩码") {
        //     i.technoColor = 1;
        //   }
        // });
        item.productTagPrintingLayerList.forEach((x, i) => {
          if (x.technoColor === "") {
            x.technoColor = -1;
          }
          if (!x.printingLayerName) {
            this.formData.productTagViewList[
              index
            ].productTagPrintingLayerList.splice(i, 1);
          }
        });
      });
      this.$api.business.UpdateProductTag(this.formData).then((res) => {
        // this.$api.business
        //   .UpdateProductInfoData(this.formModel.baseData)
        //   .then((res) => {});
        this.isDisable = true;
        let obj = {
          state: 2,
          productCode: this.productCode,
        };
        this.$api.business.UpdateProductState(obj).then((res) => {
        this.isShowEdits = true
        this.$emit('showEditEvent',this.isShowEdits)
          this.$message.success("保存成功");
          this.getDetail(this.productCode);
        });
      });
      return;
    },

    //添加明细数据
    addDetailList(row, index, rowIndex) {
      if (
        index ==
        this.formData.productTagViewList[rowIndex].productTagPrintingLayerList
          .length -
          1
      ) {
        this.formData.productTagViewList[
          rowIndex
        ].productTagPrintingLayerList.push({
          productPrintingLayerID: 0,
          productPrintingLayerCode: "",
          productLayerClientCode: "",
          productTagCode: "",
          isSurfaceLayer: 0,
          printingLayerName: "",
          printingMaterial: "",
          baseFilmColor: "",
          isHaveTechno: 0,
          technoPlaces: "",
          technoColor: "",
          isHaveBarCode: 0,
          barCodePlaces: "",
          rowKey: Date.now(),
          isLiuJiao: 0,
          liuJiaoTexture: "",
        });
        this.colorFun("color");
        this.colorFun("cailiao");
        this.colorFun("biaomian");
        this.colorFun("liujiao");
      }

      let LayerList =
        this.formData.productTagViewList[rowIndex].productTagPrintingLayerList;
      console.log(LayerList);
      this.PrintingLayerSort(LayerList);
    },

    // 新建标签
    handleAddLabel() {
      this.formData.productTagViewList.push({
        productTagID: 0,
        productTagCode: "",
        tagClientCode: "",
        productCode: "",
        productTagName: "",
        matchQuantity: 1,
        comparisonObject: "",
        percentageValue: 0,
        productTagPrice: 0,
        tagShape: "",
        tagWidth: 0,
        tagHeight: 0,
        tagBorderRadius: 0,
        tagBorder: 0,
        tagType: "",
        postedContent: "",
        surfaceRequires: "",
        scrapingCoatingColor: "",
        scrapingWordColor: "",
        productTagPrintingLayerList: [
          {
            productPrintingLayerID: 0,
            productPrintingLayerCode: "",
            productLayerClientCode: "",
            productTagCode: "",
            isSurfaceLayer: 0,
            printingLayerName: "",
            printingMaterial: "",
            baseFilmColor: "",
            isHaveTechno: 0,
            technoPlaces: "",
            technoColor: "",
            isHaveBarCode: 0,
            barCodePlaces: "",
            rowKey: 0,
            isLiuJiao: 0,
            liuJiaoTexture: "",
          },
        ],
      });
      this.colorFun("biaomian");
      this.colorFun("coatingColor");
      this.colorFun("coatingTextColor");
      this.setLabelName();
      this.unitChange();
    },

    //取消
    handleCancel() {
      this.$confirm("信息尚未保存，是否保存?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.handleSave();
        })
        .catch(() => {
          this.isShowEdits = true
        this.$emit('showEditEvent',this.isShowEdits)
          this.getDetail(this.productCode);
          this.isDisable = true;
        });
    },

    //获取详情
    getDetail(id) {
      this.$emit("init", "");
    },

    //删除
    handleDeleteRow(row, index, rowIndex) {
      let LayerList =
        this.formData.productTagViewList[rowIndex].productTagPrintingLayerList;
      LayerList.splice(index, 1);
      this.PrintingLayerSort(LayerList);
    },

    //排序
    PrintingLayerSort(LayerList) {
      LayerList[0].printingLayerName = "表层";
      if (LayerList.length > 2) {
        LayerList[LayerList.length - 2].printingLayerName = "底层";
      }
      LayerList.forEach((element, index) => {
        if (index > 0 && index < LayerList.length - 2) {
          element.printingLayerName = "里层" + index;
        }
      });
    },
    //复制
    handleCopyRow(row, index, rowIndex) {
      let LayerList =
        this.formData.productTagViewList[rowIndex].productTagPrintingLayerList;
      LayerList.splice(index, 0, JSON.parse(JSON.stringify(row)));
      LayerList[index].productPrintingLayerCode = "";
      this.PrintingLayerSort(LayerList);
    },

    //复制表单
    handleCopyForm(item, index) {
      // this.formData.productTagViewList.push(item);
      this.formData.productTagViewList.splice(
        this.formData.productTagViewList.length - 1,
        0,
        JSON.parse(JSON.stringify(item))
      );
      this.formData.productTagViewList[index].productTagCode = "";
      if (
        this.formData.productTagViewList[index].productTagPrintingLayerList
          .length > 0
      ) {
        this.formData.productTagViewList[
          index
        ].productTagPrintingLayerList.forEach((x) => {
          x.productPrintingLayerCode = "";
        });
      }
      this.setLabelName();
      this.unitChange();
    },

    //设置标签名称
    setLabelName() {
      if (this.formData.productTagViewList.length < 1) {
        this.formData.productTagViewList[0].productTagName = "小标";
      } else {
        this.formData.productTagViewList.forEach((item, i) => {
          if (i == 0) {
            this.formData.productTagViewList[i].productTagName = "小标";
          } else if (i == 1) {
            this.formData.productTagViewList[0].productTagName = "中标";
            this.formData.productTagViewList[i].productTagName = "小标";
          } else if (i == 2) {
            this.formData.productTagViewList[0].productTagName = "大标";
            this.formData.productTagViewList[1].productTagName = "中标";
            this.formData.productTagViewList[i].productTagName = "小标";
          } else {
            if (i > 2) {
              this.formData.productTagViewList[i].productTagName =
                "小标" + (i - 2);
            }
          }
        });
      }
    },

    //删除表单
    handleDeleteForm(item, index) {
      this.formData.productTagViewList.splice(index, 1);
      this.setLabelName();
      this.unitChange();
    },
  },
};
</script>

      <style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}

.label_box {
  margin-bottom: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  .head {
    padding: 0 8px;
    margin-bottom: 10px;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
    background: #fafafa;
    height: 36px;
  }
}

.label_box:hover {
  border: 1px solid #3967ff;
}

.border_line {
  border-bottom: 1px solid #dcdfe6;
  min-height: 32px;
}
</style>
